<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看完整注册资料" v-model="visible" append-to-body width="1200px" @close="handleClose">
    <div class="v-title my-3">注册信息</div>
    <div class="grid gap-x-3">
      <div class="grid grid-cols-3 gap-3 mb-3">
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">手机号码: </strong>{{
          form.register_info.phone_num }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">注册邮箱: </strong>{{
          form.register_info.email }}</div>
      </div>
    </div>
    <div class="v-title my-3">资料信息</div>
    <div class="grid gap-x-3">
      <div class="grid grid-cols-3 gap-3 mb-3">
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司名称: </strong>{{
          form.company_info.company_name_ch }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司名称拼音: </strong>{{
          form.company_info.company_name_py }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">营业执照号: </strong>{{
          form.company_info.license_num }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司成立时间: </strong>{{
          form.company_info.established_date }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司地址: </strong>{{
          form.company_info.company_area_names + form.company_info.company_address_detail
        }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司地址拼音: </strong>{{
          form.company_info.company_address_pinyin }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">邮编: </strong>{{
          form.company_info.postal_code }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">法人姓名: </strong>{{
          form.company_info.legal_person_name }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">法人身份证号: </strong>{{
          form.company_info.legal_person_idcard }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">法人手机号: </strong>{{
          form.company_info.legal_person_mobile }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">对公银行: </strong>{{
          form.company_info.public_bank }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">银行支行: </strong>{{
          form.company_info.bank_branch }}</div>
        <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">银行卡号: </strong>{{
          form.company_info.bank_account_num }}</div>
      </div>
    </div>

    <div class="v-title my-3">VAT税号</div>
    <vxe-table :data="form.vat_info" class="w-full">
      <vxe-column title="站点" field="site_name" minWidth="100"></vxe-column>
      <vxe-column title="VAT税号" field="vat_num" minWidth="200"></vxe-column>
      <vxe-column title="VAT证书日期" field="vat_certificate_date" minWidth="150"></vxe-column>
      <vxe-column title="本地税号" field="german_local_tax_num" minWidth="100"></vxe-column>
      <vxe-column title="EORI" field="eu_eori_num" minWidth="100"></vxe-column>
    </vxe-table>
    <div class="v-title my-3">ERP</div>
    <div class="grid grid-cols-3 gap-3">
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">证书ID: </strong>{{
        form.epr_info.certificate_id }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">公司: </strong>{{
        form.epr_info.company_name_ch }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">EPR项目: </strong>{{
        form.epr_info.erp_project }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">类别: </strong>{{
        form.epr_info.category }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">品牌: </strong>{{
        form.epr_info.brand_name }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">代理: /理机构</strong>{{
        form.epr_info.agency }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">费用: </strong>{{
        form.epr_info.fee
      }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">合同日期: </strong>{{
        form.epr_info.contract_date }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">生效日期: </strong>{{
        form.epr_info.effective_date }}</div>
      <div class="flex"><strong class="mr-2 inline-block text-right" style="flex: 0 0 90px">申请人: </strong>{{
        form.epr_info.applicant_id }}</div>
    </div>
  </el-dialog>
</template>

<script setup>
import api from '../api'
const load = ref(false)
const visible = ref(false)
const form = ref({})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  form.value = {
    register_info: {},
    company_info: {},
    vat_info: [],
    epr_info: {},
  }
  if (!load.value) {
    load.value = true
    await 1
  }
  const res = await api.getRegister({ shop_id })
  form.value = res.data
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>